<template>
  <div class="singleOrder" v-loading.fullscreen.lock="fullscreenLoading">
    <header>
      <div class="container">
        <div class="logo">
          <router-link to="/index">
            <img src="../../public/images/logo.jpg" alt="" />
            <span>商城</span>
          </router-link>
        </div>
        <div class="user">
          <router-link to="/orderlist">
            <i class="el-icon-user"></i> 我的订单</router-link
          >
        </div>
      </div>
    </header>
    <main>
      <el-breadcrumb separator="/" class="breadcrumb">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/orderlist' }"
          >我的订单</el-breadcrumb-item
        >
        <el-breadcrumb-item>订单详情</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="singleOrderDetail">
        <div class="title">订单详情</div>
        <div class="header">
          <div class="header-left">
            <h5><span>订单号：</span> {{ singleOrder.order_id }}</h5>
            <h5><span>下单时间：</span> {{ orderTime }}</h5>
          </div>
          <div class="header-right">
            <button @click="handleDeleteOrder">删除订单</button>
          </div>
        </div>
        <div class="line"></div>
        <div class="goodslist">
          <div class="subhead">商品清单</div>
          <ul class="goodslist-header">
            <li>商品</li>
            <li>价格</li>
            <li>数量</li>
            <li>小计</li>
          </ul>
          <ul v-for="item in singleOrder.goods_info" :key="item.id">
            <li>
              <img :src="item.s_goods_photos[0].path" alt="" />
              <span>{{ item.goods_name }}</span>
            </li>
            <li>￥{{ item.price.toFixed(2) }}</li>
            <li>×{{ item.num }}</li>
            <li class="sumPrice">￥{{ (item.price * item.num).toFixed(2) }}</li>
          </ul>
        </div>
        <div class="payfooter">
          <div class="footer-container">
            <p>
              商品总计: <span>￥{{ singleOrder.total_price }}</span>
            </p>
            <p>运费：<span>￥0.00</span></p>
            <p>
              实付总额：<span class="totalprice"
                >￥{{ singleOrder.total_price }}</span
              >
            </p>
          </div>
        </div>
        <div class="title">地址信息</div>
        <div class="addres">
          <div><span>收件人</span>{{ singleOrder.s_address.name }}</div>
          <div><span>联系电话</span>{{ singleOrder.s_address.phone }}</div>
          <div>
            <span>配送地址</span
            >{{ singleOrder.s_address.area_name + singleOrder.s_address.desc }}
          </div>
        </div>
        <div class="title">支付方式</div>
        <div class="pay">
          <div>
            <span><i class="el-icon-money"></i></span>
            现在支付
          </div>
        </div>
        <div class="title">发票</div>
        <div class="bill">
          <div>
            <span>发票类型</span>
            不需要发票
          </div>
        </div>
      </div>
    </main>
    <pageFooter></pageFooter>
  </div>
</template>

<script>
import pageFooter from "../components/homeComponent/pageFooter.vue";
import {
  getSinglOrdergRequest,
  deleteSinglOrdergRequest,
} from "@/assets/tool/request.js";
import { format } from "@/assets/tool/datetime.js"; //转换时间函数
export default {
  components: {
    pageFooter: pageFooter,
  },
  data() {
    return {
      singleOrder: {}, //商品信息
      orderTime: "", //订单创建时间
      fullscreenLoading: true, //加载
    };
  },

  methods: {
    // 删除订单
    async handleDeleteOrder() {
      this.$confirm("是否删除订单？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await deleteSinglOrdergRequest(this.$route.params.id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          setTimeout(() => {
            this.$router.push("/orderlist");
          }, 1000);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },

  async created() {
    let res = await getSinglOrdergRequest(this.$route.params.id);
    this.singleOrder = res.data.result;
    this.orderTime = format(this.singleOrder.order_time);
    this.fullscreenLoading = false;
  },
};
</script>

<style lang="scss" scoped>
.singleOrder {
  min-height: 100vh;
  background-color: #eee;
}

//  头部样式
header {
  background-color: #fff;
  .container {
    width: 1200px;
    height: 50px;
    display: flex;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    .logo {
      img {
        height: 50px;
      }
      span {
        font-size: 18px;
        color: #000;
      }
    }
    a {
      color: #000;
    }
  }
}

//主题样式
main {
  width: 1200px;
  margin: 30px auto;
  // background: #eee;
  .breadcrumb {
    width: 100%;
    display: flex;
    margin: 30px 0;
  }
  //单品样式
  .singleOrderDetail {
    background-color: #fff;
    padding: 40px;
    .title {
      font-size: 28px;
      line-height: 50px;
      margin-top: 20px;
    }
    .header {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      .header-left {
        h5 {
          font-size: 16px;
          margin-top: 6px;
          span {
            display: inline-block;
            width: 90px;
            color: rgba(0, 0, 0, 0.45);
          }
        }
      }
      .header-right {
        button {
          margin-left: 10px;
          width: 100px;
          height: 40px;
          background: transparent;
          border: 1px #ccc solid;
          border-radius: 5px;
          cursor: pointer;
          &:hover {
            color: #1890ff;
            border-color: #1890ff;
          }
        }
      }
    }

    .line {
      height: 1px;
      background-color: #eee;
      margin: 30px 0;
    }
    // 商品列表样式
    .goodslist {
      .subhead {
        font-size: 22px;
        line-height: 30px;
      }
      ul {
        padding: 5px;
        display: flex;
        font-size: 16px;
        border-bottom: 1px solid #eee;
        align-items: center;
        height: 100px;
        li {
          flex: 1;
          text-align: right;
        }
        li:first-child {
          flex: 6;
          text-align: left;
          img {
            width: 100px;
          }
        }
        .sumPrice {
          font-weight: 600;
        }
      }
      .goodslist-header {
        height: 50px;
      }
    }
    .payfooter {
      padding: 20px 0;
      display: flex;
      justify-content: flex-end;
      border-bottom: 1px solid #eee;
      .footer-container {
        width: 300px;
        font-size: 18px;
        line-height: 25px;
        p {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 5px;
          .totalprice {
            font-size: 20px;
            font-weight: 600;
            line-height: 50px;
          }
        }
      }
    }
    .addres,
    .pay,
    .bill {
      font-size: 16px;
      line-height: 24px;
      padding-bottom: 30px;
      border-bottom: 1px solid #eee;
      div {
        margin-top: 20px;
        span {
          display: inline-block;
          width: 300px;
          color: rgba(0, 0, 0, 0.45);
          .el-icon-money {
            font-size: 40px;
          }
        }
      }
    }
  }
}
</style>>